<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
  <title>个人日记</title>
  <style>
    /* 原有样式保持不变 */
    body {
      font-family: Arial, sans-serif;
      max-width: 800px;
      margin: 20px auto;
      padding: 20px;
      background-color: #f5f5f5;
    }
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
    }
    .diary-section {
      background: white;
      padding: 25px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .diary-item {
      border-bottom: 1px solid #eee;
      padding: 15px 0;
    }
    .diary-item:last-child {
      border-bottom: none;
    }
    .btn {
      padding: 8px 15px;
      border-radius: 4px;
      text-decoration: none;
      display: inline-block;
    }
    .new-btn {
      background: #007bff;
      color: white;
      margin-bottom: 20px;
    }
    .detail-btn {
      background: #28a745;
      color: white;
    }
    .delete-btn {
      background: #dc3545;
      color: white;
    }

    /* 新增样式 */
    .diary-meta {
      color: #666;
      font-size: 12px;
      margin: 5px 0;
    }
    .diary-category {
      display: inline-block;
      padding: 3px 8px;
      background: #e8f4ff;
      border-radius: 12px;
      font-size: 12px;
      margin-left: 10px;
    }
    .search-box {
      margin-bottom: 20px;
    }
    .search-box input {
      width: 100%;
      padding: 8px 15px;
      border: 1px solid #ddd;
      border-radius: 20px;
    }
    .pagination {
      margin-top: 20px;
      display: flex;
      justify-content: center;
      gap: 5px;
    }
    .page-item {
      padding: 5px 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
    .page-item.active {
      background: #007bff;
      color: white;
    }
  </style>
</head>
<body>
<div class="header">
  <h1>欢迎，${user.username}！</h1>
  <a href="${pageContext.request.contextPath}/logout" class="btn">退出登录</a>
</div>

<div class="diary-section">
  <!-- 新增搜索框 -->
  <div class="search-box">
    <input type="text" placeholder="🔍 搜索日记标题..." id="searchInput">
  </div>

  <a href="${pageContext.request.contextPath}/diary?action=create" class="btn new-btn">✍️ 写新日记</a>

  <!-- 新增日记统计 -->
  <div style="color: #666; margin-bottom: 15px;">
    共找到 ${fn:length(user.diaries)} 篇日记
  </div>

  <c:forEach items="${user.diaries}" var="diary">
    <div class="diary-item">
      <!-- 新增分类标签 -->
      <span class="diary-category">${not empty diary.category ? diary.category : '未分类'}</span>

      <h3>${diary.title}</h3>

      <!-- 新增时间显示 -->
      <div class="diary-meta">
        📅 创建于 <fmt:formatDate value="${diary.createDate}" pattern="yyyy-MM-dd HH:mm"/>
        <c:if test="${diary.createTime ne diary.lastModifiedTime}">
          | ✏️ 更新于 <fmt:formatDate value="${diary.lastModifiedDate}" pattern="yyyy-MM-dd HH:mm"/>
        </c:if>
      </div>

      <p>${fn:substring(diary.content, 0, 50)}...</p>

      <div class="action-bar">
        <a href="${pageContext.request.contextPath}/diary?action=edit&id=${diary.id}"
           class="btn detail-btn">✏️ 编辑</a>
        <form action="${pageContext.request.contextPath}/diary"
              method="post"
              onsubmit="return confirm('⚠️ 确认永久删除该日记？')"
              style="display:inline-block;margin-left:10px">
          <input type="hidden" name="action" value="delete">
          <input type="hidden" name="id" value="${diary.id}">
          <button type="submit" class="btn delete-btn">🗑️ 删除</button>
        </form>
      </div>
    </div>
  </c:forEach>

  <!-- 新增分页控件 -->
  <div class="pagination">
    <c:forEach begin="1" end="${totalPages}" var="i">
      <a href="?page=${i}" class="page-item ${i eq currentPage ? 'active' : ''}">${i}</a>
    </c:forEach>
  </div>
</div>

<script>
  // 实时搜索功能
  document.getElementById('searchInput').addEventListener('input', function(e) {
    const keyword = e.target.value.toLowerCase();
    document.querySelectorAll('.diary-item').forEach(item => {
      const title = item.querySelector('h3').textContent.toLowerCase();
      item.style.display = title.includes(keyword) ? 'block' : 'none';
    });
  });
</script>
</body>
</html>